<template>
  <div class="BusNeighborsPublish wd1200">
    <v-bread />
    <div class="select-box">
      <div class="box">
        <el-select v-model="value" placeholder="请选知识产权名称" class="el-select" @change="selectChange">
          <el-option v-for="(item, index) in typeSelect" :key="index" :label="`${item.tType} (${item.count})`" :value="item.tType" />
        </el-select>
      </div>
    </div>
    <div class="wd1200 table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :highlight-selection-row="true"
        :highlight-current-row="true"
        :stripe="true"
        :header-cell-style="{background:'#E5F2FF',color:'#000000',fontSize:'12px',fontWeight:'500'}"
        :cell-style="{fontSize:'12px',color:'#000000',fontWeight:'500'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          prop="tName"
          label="知识产权名称"
          align="center"
          width="400"
        />
        <el-table-column
          prop="tType"
          align="center"
          label="类型"
          width="400"
          class-name="num"
        >
          <template slot-scope="scope">
            <el-tag
              :style="{color: changeColor(scope.row.tType), borderColor:changeColor(scope.row.tType)}"
              size="mini"
              :hit="true"
              effect="plain"
              :disable-transitions="false"
            >{{ scope.row.tType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="tDate"
          label="申请时间"
        />
      </el-table>
    </div>
    <v-pagination v-if="total" :total="total" :page-size="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
  </div>
</template>
<script>
import vBread from '../../../components/busNeighbors/bread'
import vPagination from '../../../components/busNeighbors/pagination'
export default {
  name: 'BusNeighborsPublish',
  components: { vBread, vPagination },
  data() {
    return {
      value: '',
      types: [{
        color: '#8173FF',
        value: '商标信息'
      },{
        color: '#FF596A',
        value: '专利信息'
      },{
        color: '#4D94FF',
        value: '网站备案'
      },{
        color: '#FF9F40',
        value: '作品著作权'
      },{
        color: '#24C84C',
        value: '软件著作权'
      },{
        color: '#24C84C',
        value: '软件著作权'
      }],
      tableData: [],
      params: {},
      apiCollection: {},
      api: '',
      total: 0,
      pageSize: 0,
      companyName: '',
      typeSelect: []
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {

    this.api = JSON.parse(this.$route.query.data).api
    this.params = JSON.parse(this.$route.query.data).params
    this.pageSize = JSON.parse(this.$route.query.data).params.pageSize
    this.apiCollection = require('@/api/busNeighbors')
    this.toDetails()
    this.init(this.apiCollection)
  },
  methods: {
    async toDetails() {
      this.params.tType = this.value === '全部 ' ? '' : this.value
      const res = await this.apiCollection[this.api](this.params)
      this.tableData = res.data.content
      this.total = res.data.total
    },
    async init(apiCollection) {
      const res = await apiCollection['intellectual_property_chart']({
        endDate: this.params.endDate,
        lyId: this.params.lyId,
        startDate: this.params.startDate
      })
      this.typeSelect = res.data.content
      this.typeSelect.unshift({
        tType: '全部 ',
        count: this.typeSelect.reduce((total, num) => total + num.count, 0)
      })
      console.log(this.typeSelect)
    },
    handleSizeChange(val) {
      this.$set(this.params, 'pageSize', val)
      this.toDetails()
    },
    handleCurrentChange(val) {
      this.$set(this.params, 'pageNumber', val)
      this.toDetails()
    },
    selectChange(val) {
      this.toDetails()
    },
    changeColor(tType) {
      return this.types.find(item => item.value.includes(tType)).color
    }
  }
}
</script>
<style lang="scss" scoped>
.BusNeighborsPublish{

  .select-box {
    display: flex;
    padding: 30px 0 0;

    .box {
      flex: 1;
      margin-right: 20px;
      width: 386px;

      .el-select {
        width: 100%;
      }
    }

    .box:last-child {
      margin-right: 0;
    }
    .search-btn {
      width: 104px;
      background: linear-gradient( 270deg, #649CED 0%, #0071DF 100%);
      border-radius: 6px 6px 6px 6px;
      line-height: 36px;
      height: 36px;
      padding: 0;
    }
  }
  .table-box{
    margin-top: 30px;
  }
  .pagination{
    margin-top: 40px;
    text-align: end;
  }

  ::v-deep .el-pagination li{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
    font-weight: 500;
    border-radius: 2px 2px 2px 2px;
  }
  ::v-deep .el-pagination li.active{
    background: #217FE4;
  }
  ::v-deep .el-pagination .btn-prev{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
  }
  ::v-deep .el-pagination .btn-next{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
  }
  ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background: #F4F8FC;
  }
  ::v-deep .num{
    color: #FF8C1A;
  }
}
</style>
